<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-05-11 15:10:56
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-20 17:32:42
 * @FilePath: \nien-vue3-admin\src\views\myMission\personalTasks\toDoTasks\index.vue
 * @Description: 待办任务
-->
<template>
  <div>
    <customContainer ref="customContainerRef" :config="config" />
    <Detail
      v-model:visible="visible"
      :title="title"
      :data="data"
      :disabled="true"
    >
      <el-form ref="approveFormRef" :model="form">
        <el-form-item label="审批意见" prop="approve" :rules="{required:true,message:'审批意见必选',trigger:'change'}">
          <el-radio-group v-model="form.approve">
            <el-radio label="0" size="large">同意</el-radio>
            <el-radio label="1" size="large">不同意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="approveRemark">
          <el-input v-model="form.approveRemark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="submitLoading" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </Detail>
  </div>
</template>
<script lang='ts' setup>
import { ref, resolveComponent } from 'vue'
import { ElMessage } from 'element-plus'
import Detail from '@/views/myMission/components/detail.vue'
import { activitiTaskList, activitiTaskDetail, taskComplete } from '@/api/myMission/personalTasks/toDoTasks'
import { validateForm, resetForm } from '@/utils'
import { approvalHistory } from '../../hooks'

const taskId = null
const visible = ref(false), form = ref({
    approve: undefined,
    approveRemark: undefined,
    taskId: undefined,
  }), approveFormRef = ref(),
  title = ref(''), data = ref({}),
  customContainerRef = ref(), submitLoading = ref(false),
  config = {
    query: {
      fields: [
        {
          label: '任务名称',
          prop: 'taskName',
        },
      ],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        taskName: undefined,
      },
    },
    table: {
      columns: [
      // { type: 'index', label: '序号', width: '55' },
        { label: '任务名称', prop: 'taskName' },
        { label: '所属流程', prop: 'processName' },
        { label: '流程发起人', prop: 'taskName' },
        { label: '任务开始日期', prop: 'taskCreateTime' },
        {
          label: '操作',
          className: 'custormFixedCol',
          showOverflowTooltip: false,
          fixed: 'right',
          render(h, { row }) {
            return [
              h(resolveComponent('ElButton'), {
                onClick: async () => {
                  title.value = '审批'
                  const { data: resData } = await approvalHistory({ row, visible, api: activitiTaskDetail, key: 'taskId' })
                  data.value = resData
                },
                text: true,
                loading: row.loading,
                type: 'primary',
              }, () => '审批'),
            // h(resolveComponent('el-popconfirm'), {
            //   confirmButtonText: '确认',
            //   cancelButtonText: '取消',
            //   icon: InfoFilled,
            //   title: '是否确认审批',
            //   onConfirm: () => {
            //     console.log('queding')
            //   },
            //   onCancel: () => {
            //     console.log('quxiao')
            //   },
            // }, {
            //   reference: () => h(resolveComponent('ElButton'), {
            //     onClick: () => {
            //       console.log(params)
            //     },
            //     text: true,
            //     type: 'primary',
            //   }, () => '审批'),
            // }),
            // h(resolveComponent('ElButton'),
            //   {
            //     text: true,
            //     type: 'primary',
            //     onClick: () => {
            //       visible.value = true
            //       title.value = '审批历史'
            //     },
            //   },
            //   () => '审批历史'),
            ]
          },
        },
      ],
      event: {
      // onRowClick(e) {
      //   // console.log(e)
      // },
      },
    },
    api: activitiTaskList,
    // requestTrans: (q) => {
    //   console.log(q)
    //   return q
    // },
    customKey: 'myMission/personalTasks/toDoTasks',
  }

const submit = () => {
    validateForm(approveFormRef.value, () => {
      form.value.taskId = taskId
      submitLoading.value = true
      taskComplete(form.value).then(res => {
        if (res.code === 200) {
          ElMessage({ type: 'success', message: res.msg })
          customContainerRef.value.getList()
          visible.value = false
        }
      }).finally(() => {
        submitLoading.value = false
      })
    })
  }, cancel = () => {
    visible.value = false
    resetApprovedForm()
  }, resetApprovedForm = () => {
    resetForm(approveFormRef.value) 
  }

</script>
<script lang="ts">
export default {
  name: 'ToDoTasks',
}
</script>